<template>
    <div class="goods">
     <div class="menu-wrapper" ref="menuWrapper">
         <ul>
             <li v-for = "(item,index) in goods" v-on:click="selectMenu(index,$event)" :key="index" class="menu-item" :class="{ 'current':currentIndex === index }">
                 <span class="text border-1px">
                    <span  v-show="item.type > 0" class="icon"
                    :class="classMap[item.type]"></span> {{item.name}}
                 </span>
             </li>
         </ul>
     </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
                <li v-for ="(item,index) in goods"
                    :key="index"
                    class="food-list food-list-hook  border-1px(rgba(7,17,27,0.1))"
                    ref="foodListHook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="(food,index) in item.foods"
                            @click.stop="selectFood(food,$event)"
                            :key="index"
                            class="food-item">
                            <div class="icon">
                            <img :src="food.icon" alt="" width="57" height="57">
                            </div>
                            <div class="content">
                                <h2 class="name">{{ food.name }}</h2>
                                <p class="desc"> {{ food.description }} </p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}</span><span>好评率:{{ food.rating }}</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span><span  class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                                <div class="carcontrol-wrapper">
                                <cartcontrol
                                        :food="food"
                                        ></cartcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopcart ref="shopcart"
                  :select-foods="selectFoods"
                  :delivery-price = "seller.deliveryPrice"
                  :min-price="seller.minPrice"></shopcart>
        <food :food="selectedFood"
              ref="food"></food>
    </div>
</template>
<script>
    import axios from 'axios';
    import BScroll from 'better-scroll';
    import shopcart from "./shopcart";
    import cartcontrol from './cartcontrol';
    import food from '../../components/food/food';
    export default {
        name: "goods",
        data(){
          return {
              seller:{},
              goods:[],
              listHeight:[],
              scrollY: 0,
              selectedFood:{}
          }
        },
        computed: {
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];
                    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                        return i;
                    }
                }
                return 0;
            },
            selectFoods(){
                let foods=[];
                this.goods.forEach( function(good){
                    good.foods.forEach( function(food){
                        if(food.count){
                            foods.push(food)
                        }
                    } );
                } );
                return foods
          
          }
        },
        methods:{
           selectMenu(index,$emit){
              if(!$emit._constructed){
                  return;
              }
               let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
              let el =foodList[index];
              this.foodsScroll.scrollToElement(el,300);

    },
            getDataInfo(){
                axios.get('/src/mock/appData')
                    .then( (res)=>{
                      res = res.data;
                      if(res){
                        const data = res;
                        this.seller = data.seller;
                        this.goods = data.goods;
                      }
                    })

            },
           
            // } getDataInfoSucc(res){
            //     res = res.data;
            //     if(res){
            //     const data = res;
            //     this.seller =data.seller;
            //     this.goods = data.goods;

            //     },
            _initScroll(){
              if(!this.meunScroll){
                this.meunScroll =new BScroll(this.$refs.menuWrapper,{
                    click: true
                });}else{
                  this.meunScroll.refresh();
                }
                this.foodsScroll = new BScroll (this.$refs.foodsWrapper,{
                    click: true,
                    probeType:3,
                });
                this.foodsScroll.on('scroll',(pos) => {
                      let liElement = 102;
                      this.scrollY = Math.abs(Math.round( pos.y ))+liElement;
                });
            },
            _calculateHeight(){
                let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
                let height = 0;
                this.listHeight.push(height);
                for (let i=0; i<foodList.length;i++){
                    let item = foodList[i] ;
                    height += item.clientHeight;
                    this.listHeight.push(height);
                }
            },
            selectFood(food,event){
                    if(!event._constructed){
                        return;
                    }
                    this.selectedFood = food;
                    this.$refs.food.show();
            },
        },
        created(){
            this.classMap=['decrease','discount','guarantee','invoice','special']
        },
        mounted(){
           this.getDataInfo();
          setTimeout( () =>{
           this._initScroll();
            this._calculateHeight();
          },20)
        },
        components:{
            shopcart,
            cartcontrol,
            food,
        },
    }
</script>

<style lang="stylus" scoped>
    @import "~../../stylus/border.styl"
     .goods
       display:flex
       position:absolute
       top: 174px
       bottom:46px
       width:100%
       overflow:hidden
      .menu-wrapper
        flex: 0 0 80px
        width: 80px
        background: #f3f5f7
        .menu-item
          display:table
          height:54px
          width:56px
          line-height:14px
          padding:0 12px
          font-weight:200
          &:last-child
             .text:after
                border-top:none
          &.current
            position :relative
            z-index:10
            margin-top:-1px
            background:#fff
            font-weight:700
            .text:after
              border-top:none
            .text
             display: table-cell
             vertical-align: middle
             border-1px(rgba(7,17,27,.1))
             width: 56px
             font-size: 12px
          .icon
            display:inline-block
            vertical-align:top
            width:12px
            height:12px
            margin-right:2px
            background-size:12px 12px
            background-repeat:no-repeat
            &.decrease
                bg-image('decrease_3')
            &.discount
                bg-image('discount_3')
            &.guarantee
                bg-image('guarantee_3')
            &.invoice
                bg-image('invoice_3')
            &.special
                bg-image('special_3')
          .text
            font-size:12px
            display:table-cell
            width:56px
            vertical-align:middle
            border-1px(rgba(7,17,27,0.2))
      .foods-wrapper
        flex:1
        .title
         padding-left:14px
         height:26px
         line-height:26px
         border-left:2px solid #d9dde1
         font-size:12px
         color:rgb(147,153,159)
         background:#f3f5f7
        .food-item
         display:flex
         margin:18px
         padding-bottom:18px
         border-1px(rgba(7,17,27,0.1))
         &:last-child
            border-none()
            margin-bottom:0
         .icon
          flex: 0 0 57px
          margin-right: 10px
         .content
          flex:1
          .name
           margin:2px 0 8px 0
           height:14px
           font-size:14px
           color:rgb(7,17,27)
          .desc,.extra
           line-height:10px
           font-size:10px
           color:rgb(147,153,159)
          .desc
           margin-bottom:8px
          .extra
           .count
            margin-right:12px
          .price
            font-weight:700
            line-height:14px
            .now
             margin-right:8px
             font-size:14px
             color:rgb(240,20,20)
            .old
             text-decoration:line-through
             font-size:10px
             color:rbg(147,153,159)
          .carcontrol-wrapper
           position:absolute
           right:0
           bottom:0

</style>